Ext.ux.TabCloseMenu = function(){
    var tabs, menu, ctxItem;
    this.init = function(tp){
        tabs = tp;
        tabs.on('contextmenu', onContextMenu);
    }

    function onContextMenu(ts, item, e){
        if(!menu){ // create context menu on first right click
            menu = new Ext.menu.Menu([{
                id: tabs.id + '-close',
                text: '关闭此标签页',
                iconCls:'menuClose',
                handler : function(){
                    tabs.remove(ctxItem);
                }
            },{
                id: tabs.id + '-close-others',
                text: '关闭其他标签页',
                iconCls:'menuClose',
                handler : function(){
                    tabs.items.each(function(item){
                        if(item.closable && item != ctxItem){
                            tabs.remove(item);
                        }
                    });
                }
            },{
                id: tabs.id + '-close-all',
                text: '关闭所有标签页',
                iconCls:'menuClose',
                handler : function(){
                    tabs.items.each(function(item){
                        if(item.closable){
                            tabs.remove(item);
                        }
                    });
                }
            }]);
        }
        ctxItem = item;
        var items = menu.items;
        //检查此元件是否可以关闭，如果不能关，则关闭项变灰
        items.get(tabs.id + '-close').setDisabled(!item.closable);
        items.get(tabs.id + '-close-all').setDisabled(!item.closable);
        var disableOthers = true;
        //检查是否有其他元件，如果没有，则关闭其他项变灰
        tabs.items.each(function(){
            if(this != item && this.closable){
                disableOthers = false;
                return false;
            }
        });
        items.get(tabs.id + '-close-others').setDisabled(disableOthers);
        //在鼠标位置显示菜单
        menu.showAt(e.getPoint());
    }
};

Ext.onReady(function(){
    
    var tree=new Ext.tree.TreePanel({
        title:'tree',
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true, 
        loader:new Ext.tree.TreeLoader({
            dataUrl:'../hf/treeMenu.do?action=menu'
        })
    });
    
    new Ext.tree.TreeSorter(tree, {folderSort:true});
    
    new Ext.tree.TreeEditor(tree,{
        allowBlank    : false
    });
    
    var root=new Ext.tree.AsyncTreeNode({
        text:'woshiroot',
        id:'0'
    });
    
    
    tree.setRootNode(root);

    
    var contextmenu=new Ext.menu.Menu({
        id:'theContextMenu',
        items:[{
            text:'aaa',
            handler:function(){
                alert('asdfdss');
            }
        }]
    });
    tree.on('contextmenu',function(node,e){
        e.preventDefault();                 //禁止默认菜单弹出
        node.select();                      //选择当前节点
        contextmenu.showAt(e.getXY());
    });
    
    
    
    var tree2=new Ext.tree.CheckboxTree({
        //el:'tree2',
        dataUrl:'../hf/treeMenu.do?action=checkboxMenu',
        rootText:'asdf',
        title:'asdfs'
    });

    
    //内容tabPanel
    var tabPanel=new Ext.TabPanel({
        region:'center',
        minTabWidth: 115,
        enableTabScroll:true,
        deferredRender:false,
        defaults: {
            autoScroll:true,
            closable:true
        },
        activeTab:0,
        plugins: new Ext.ux.TabCloseMenu(),
        items:[{
            title: 'Close Me',
            iconCls: 'tabs',
            closable:false,
            html:'<iframe width=100% height=100% frameborder=0 scrolling="auto" src="TempleteManageList.jsp"></iframe>'
        }]
    });
   
    //添加连接
    function addTab(){
        tabPanel.add({
            title: 'New Tab ' ,
            iconCls: 'tabs',
            html: 'Tab Body '+ '<br/><br/>',
            closable:true
        }).show();
    }
    /*
    function addTab(node,e){
        var iframeSrc="TempleteManageList.jsp";
        if(node.attributes.leaf){
            var tab=tabPanel.findById(node.id);
            if(tab==null){
                tabPanel.add({
                    id:node.id,
                    title: node.id,
                    iconCls: 'tabs',
                    html: '<iframe width=100% height=100% frameborder=0 scrolling="auto" src='+iframeSrc+'></iframe>',
                    closable:true
                }).show();
            }else{
                tab.show();
            }       
        }
        return ;
    }*/
    /**
     * 双击树节点的功能
     * 1.只有叶节点才能创建新的tab
     * 2.如果与此节点相关的tab已经存在,则显示此tab不在创建新的tab
     */
    tree.on({
        'dblclick':addTab
    })
    
    var viewport = new Ext.Viewport({
            layout:'border',
            border:0,
            items:[
                {
                    margins:'0 0 0 0',
                    region:'north',
                    html:'north',
                    border:0,
                    height:80,
                    border:false
                },
                new Ext.Panel({
                    region:'west',
                    title:'菜单',
                    layout:'accordion',
                    width:280,
                    split:true,
                    useSplitTips:true,
                    collapsible: true,
                    collapseMode:'mini',
                    floatable:true,
                    defaults:{
                        bodyStyle:'padding:0px'
                    },
                    layoutConfig:{
                        titleCollapse:false,
                        animate:false,
                        activeOnTop: false
                    },
                    items: [tree,
                        tree2,{
                        title: 'Panel 2',               
                        html: '<p>Panel content!</p>'
                    },{
                        title: 'Panel 3',
                        html: '<p>Panel content!</p>'
                    }]
                }),tabPanel
             ]
        });
   root.expand();
   tree2.expandRoot();  
   //当js加载完毕后删除loading页面并渐显内容
   setTimeout(function(){
        Ext.get('loading').remove();
        Ext.get('loading-mask').fadeOut({remove:true});
    }, 250);
})